iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
WordPress

從 0 到 100:WordPress 開發者的實戰手冊系列 第 11

Day 11 - 佈景主題設計實戰 (3) 預覽畫面、除錯

  • 分享至 

  • xImage
  •  

在前一篇文章介紹了如何在 functions.php 進行特色功能定義,以及將設定佈景功能初始化的函式註冊到鉤點中,同時先拔除了大部份從基底佈景主題 Twenty Twenty-One 複製過來的檔案。

不過「拔除」檔案這個行為很瀟灑,但瀟灑的背後肯定是會有很多問題的,例如打開畫面出現 PHP 找不到函式的錯誤,沒意外的話肯定不少,所以今天的進度是先小心地預覽畫面、除錯,接著才是啟用佈景主題,開始設計屬於自己的佈景主題作品。

目前的檔案架構

我們只想要基底佈景主題的骨架,而不是從現有的樣式和功能去做疊加和修改。如果不這麼做,就像是一個刺青師傅為了要蓋掉客人身上小雞吃米圖,就算花費更多心思去改圖,功力再高強,硬改成神鳥鳳凰,看起來還是有小雞吃米的影子呀。

小雞吃米圖
圖:小雞吃米圖

畫家在白畫紙上打好線稿,再開始作畫,創意才能自由發揮。同理,這樣設計出來的佈景主題才有自己的特色。

檔案架構
圖:目前進度的檔案架構

CSS 樣式表裡的樣式語法都移除了。暫時看不到 assets 目錄。

當要開始設計樣式,SASS 檔案會放在這個目錄。

以下這兩個檔案會有許多版型檔案直接呼叫的 PHP 函式,因此選擇不移除它,以免錯誤訊息噴的整個畫面都是呀!

  • inc/template-functions.php
  • inc/template-tags.php

除了以上兩個 PHP 檔案,其它在工作區域根目錄的 PHP 檔案都是版型檔案,和 template-parts 裡的版型檔案都保留下來哦!檔案非常多,代表接下來重新設計加入自己的 CSS 會花很多的時間和心力,來打造耳目一新的風格。

預覽畫面

後台佈景主題設定頁
圖:後台佈景主題設定頁

進入 WordPress 後台,選擇「外觀」,Ironman 主題已經在列表中了。不過預覽圖還是原本的,等到設計完成後,再更換縮圖檔案。

預覽畫面
圖:預覽畫面

畫面沒有任何的樣式,首頁下方出現 PHP 錯誤找不到 xxx 類別的訊息,在 VSCode 裡搜尋該字串,找出用該類別的 PHP 語法位置,移除該語法。

隨意在預覽畫面切換頁面,瀏覽檢查,沒任何錯誤時,這時候就可以啟用它,進入下一個階段,開始進行樣式的設計。

總結

今天的進度總算看到新的佈景主題的樣子了。光禿禿地,不過這只是暫時的,很快地將會使用 CSS 語法賦予它全新的樣貌。


課後思考:

使用別人的佈景主題作品或外掛來修改,會有版權的問題嗎?如果別人修改你的作品,在網上販賣,你會怎麼想?

前篇解答參考:

註冊函式到鉤點時,要注意一下該鉤點是否在目前的 PHP 執行期間能夠觸發,如果註冊到一個已經執行過的鉤點,那就完全沒有作用。setup_theme 這個鉤點在進入佈景主題的 functions.php 時已經執行過了,所以註冊在 setup_theme 鉤點不會發生作用哦!


上一篇
Day 10 - 佈景主題設計實戰 (2) 特色功能定義
下一篇
Day 12 - 佈景主題設計實戰 (4) 選擇 CSS 框架及設定
系列文
從 0 到 100:WordPress 開發者的實戰手冊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言